import { memo, useEffect } from 'react';
import Son from '../Son';

interface IProps {
  title?: string;
  filterList: number[];
  changeTitle: () => void;
}

// memo减少子组件重复渲染  浪费性能
const Child: React.FC<IProps> = memo(({ title, filterList }) => {
  useEffect(() => {
    for (let i = 0; i < 10; i++) {
      console.log('子组件渲染...');
    }
  });

  return (
    <div className="child">
      <p>子组件</p>
      <p>标题: {title || '暂无标题'}</p>
      <ul>
        {filterList.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
      <Son></Son>
    </div>
  );
});

export default Child;
